<template>
    <div id="pc-footer">
        <div class="pc">
            <div class="pc-footer w-fixed-center">
                <div class="copyright">
                    Copyright © 2021-2024 版权所有
                </div>
            </div>
        </div>
        <div class="mobile-footer mobile">
            <div class="box" @click="doRedirectByName('web_index')"
                :class="{ box_active: webNavSelected.selected == 'index' }">
                <img class="icon" src="@/assets/img/web/nav/index_sel.png" v-show="webNavSelected.selected == 'index'">
                <img class="icon" src="@/assets/img/web/nav/index.png" v-show="webNavSelected.selected != 'index'">
                <div class="text">首页</div>
            </div>
            <div class="box" @click="doRedirectByName('web_about')"
                :class="{ box_active: webNavSelected.selected == 'about' }">
                <img class="icon" src="@/assets/img/web/nav/about_sel.png" v-show="webNavSelected.selected == 'about'">
                <img class="icon" src="@/assets/img/web/nav/about.png" v-show="webNavSelected.selected != 'about'">
                <div class="text">关于我们</div>
            </div>
            <div class="box" @click="doRedirectByName('web_video_scroll')"
                :class="{ box_active: webNavSelected.selected == 'video_scroll' }">
                <img class="icon" src="@/assets/img/web/nav/video_sel.png" v-show="webNavSelected.selected == 'video' || webNavSelected.selected == 'video_scroll'">
                <img class="icon" src="@/assets/img/web/nav/video.png" v-show="webNavSelected.selected != 'video_scroll' && webNavSelected.selected != 'video'">
                <div class="text">视频</div>
            </div>
            <div class="box" @click="doRedirectByName('web_donation')"
                :class="{ box_active: webNavSelected.selected == 'donation' }">
                <img class="icon" src="@/assets/img/web/nav/donation_sel.png" v-show="webNavSelected.selected == 'donation'">
                <img class="icon" src="@/assets/img/web/nav/donation.png" v-show="webNavSelected.selected != 'donation'">
                <div class="text">公益项目</div>
            </div>
            <div class="box" @click="doRedirectByName('web_my')"
                :class="{ box_active: webNavSelected.selected == 'my' }">
                <img class="icon" src="@/assets/img/web/nav/my_sel.png" v-show="webNavSelected.selected == 'my'">
                <img class="icon" src="@/assets/img/web/nav/my.png" v-show="webNavSelected.selected != 'my'">
                <div class="text">我的</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, inject } from 'vue';
import { webNavSelected } from '@/store/webNavSelected.js';

const { doRedirectByName } = inject('doRedirectByName');  // 依赖注入--跳转到其他页面（根据命名路由跳转）
</script>

<style scoped>
#pc-footer {
    width: 100%;
    background-color: #fff;
    border-top: 1rem solid #e5e5e5;
}

.pc-footer {
    height: 80rem;
    line-height: 80rem;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.copyright {
    font-weight: bold;
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    #pc-footer {
        border-top: none;
        position: fixed;
        z-index: 5;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .mobile-footer {
        height: 80rem;
        line-height: 80rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-footer>.box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mobile-footer>.box>.icon {
        width: 24rem;
        height: 24rem;
    }

    .mobile-footer>.box>.text {
        margin-top: 2rem;
        height: 14rem;
        font-weight: 400;
        font-size: 12rem;
        line-height: 14rem;
        color: #000000;
    }

    .mobile-footer>.box_active>.text {
        color: red;
    }
}
</style>